// pages/play/play.js
import request from "../../utils/request"
// npm 默认的模块加载机制在小程序中不能直接使用
// 在小程序中通过 npm 安装的包，首先需要通过 工具 -> 构建 npm 把npm 的包转成小程序包（通常构建后的包存放在 miniprogram_npm目录中）这样就可以像 npm 包一样去引用
import dayjs from "dayjs"
// import { secTomin } from "../../utils/time"
//定义音频的空对象，后续创建了真正的音频对象后给其赋值，放在Page外面定义是因为该音频对象在onLoad里创建，其它地方也需要用到，比如点击播放或暂停按钮时（变量提升）
let player = null;
Page({
    /**
     * 页面的初始数据
     */
    data: {
        // 当前要播放的歌曲的id
        songId: "",
        // 当前歌曲的信息
        song: null,
        //当前歌曲的url
        songUrl: "",
        //记录歌曲的播放或者暂停状态
        isPlay: false,

        // 歌曲当前播放的时间
        currentTime: 0,
        // 当前歌曲的总时长
        duration: 0,
        // 保存歌曲进度条的进度比例值
        width: '0%'
    },
    //初始化请求被点击的那首歌曲的详细数据
    async getSong() {
        try {
            const res = await request({
                url: '/song/detail',
                data: {
                    ids: this.data.songId
                }
            })
            // console.log(res);
            if (res.data.code === 200) {
                this.setData({
                    song: res.data.songs[0]
                })
            }
        } catch (error) {
            console.log(error);
        }
    },

    //获取歌曲的url
    async getSongUrl() {
        try {
            const res = await request({
                url: "/song/url",
                data: {
                    id: this.data.songId
                }
            })
            // console.log(res);
            if (res.data.code === 200) {
                this.setData({
                    songUrl: res.data.data[0].url
                })
            }
        } catch (error) {
            console.log(error);
            wx.showToast({
                title: '请求出错',
                icon: "error"
            })
        }
    },

    /**
     * 生命周期函数--监听页面加载
     *  可以通过 onLoad 生命周期函数的 第一个参数来接收传入该页面的 query
     */
    async onLoad(options) {
        // console.log(options);
        //将传递过来的歌曲id存入变量songId
        this.setData({
            songId: options.id
        })
        //获取歌曲的详细信息
        await this.getSong()
        //获取歌曲的url
        await this.getSongUrl()

        // 创建一个音频对象，将其赋值给上方定义的player
        //因为在点击播放了某一首歌曲后再次点击其它歌曲时会出现播放器重复创建的问题，所以这里需要判断一下
        //如果player不存在，则创建player音频对象，如果已经有该对象，则不要重复创建
        // if (!player) {
        //     console.log("创建了");
        //     player = wx.createInnerAudioContext()
        // }

        // console.log(this.data.songUrl);
        // player 是一个 InnerAudioContext 对象
        // player.src = this.data.songUrl
        // console.log(player.src);

        // //监听歌曲播放的事件，InnerAudioContext 对象有一个 onPlay 方法，接收一个函数作为第一个参数 
        // player.onPlay(this.onPlay)
        // // 监听音频暂停的事件
        // player.onPause(this.onPause)
        // // 监听音频播放进度更新事件
        // player.onTimeUpdate(this.onTimeUpdate)
        // player.play()

        // 微信内部会自动创建一个单例的 Audio ，然后通过getBackgroundAudioManager方法即可获取到，且多次获取得到的都是同一个 Audio
        // 1、必须传入 src 和 title 才可以播放
        // 2、不需要手动调用 play()
        player = wx.getBackgroundAudioManager()
        // 当设置了新的 src 时，会自动开始播放
        player.src = this.data.songUrl
        // 音频标题，用于原生音频播放器音频标题（必填）
        player.title = this.data.song.al.name

        player.onPlay(this.onPlay)
        player.onPause(this.onPause)
        player.onTimeUpdate(this.onTimeUpdate)

        //监听从recommend页面传递过来的下一首歌曲的id(使用自定义事件)
        // const myEvent = getApp().globalData.myEvent
        // myEvent.on("nextId", async (nextSongId) => {
        //     this.setData({
        //         songId: nextSongId
        //     })
        //     //获取歌曲的详细信息
        //     await this.getSong()
        //     //获取歌曲的url
        //     await this.getSongUrl()

        //     player.src = this.data.songUrl
        //     // 音频标题，用于原生音频播放器音频标题（必填）
        //     player.title = this.data.song.al.name
        // })

        //监听从recommend页面传递过来的下一首歌曲的id(使用pubsub)
        const pubsub = getApp().globalData.pubsub
        pubsub.subscribe("nextId", async (msg, nextSongId) => {
            this.setData({
                songId: nextSongId
            })
            //获取歌曲的详细信息
            await this.getSong()
            //获取歌曲的url
            await this.getSongUrl()

            player.src = this.data.songUrl
            // 音频标题，用于原生音频播放器音频标题（必填）
            player.title = this.data.song.al.name
        })
    },

    //音频播放事件的监听函数
    onPlay() {
        console.log("开始播放了");
        this.setData({
            isPlay: true
        })
    },
    // 音频暂停事件的监听函数
    onPause() {
        console.log("暂停播放");
        this.setData({
            isPlay: false
        })
    },

    //点击播放或暂停按钮的回调
    playOrPauseHandler() {
        // 根据当前歌曲的状态来做不同的操作
        if (this.data.isPlay) {
            // 如果正在播放，则点击过后需要暂停
            player.pause()
        } else {
            // 如果已被暂停，则点击过后需要播放
            player.play()
        }
    },
    //音频播放进度更新事件的监听函数
    onTimeUpdate(e) {
        //歌曲的当前播放时间和总时长可以从player对象中拿，此时这里的事件对象e是undefined 
        // console.log(123, e, player);
        //使用第三方包dayjs来转换歌曲播放的时间
        this.setData({
            // 歌曲当前播放的时间
            currentTime: dayjs(player.currentTime * 1000).format("mm:ss"),
            // 当前歌曲的总时长
            duration: dayjs(player.duration * 1000).format("mm:ss"),
            // 通过 当前播放时间 / 总时长 就可以得到已经播放的进度比例
            width: (player.currentTime / player.duration) * 100 + '%'
        })

        //使用自定义的工具来转换歌曲播放时间
        // this.setData({
        //     currentTime: secTomin(player.currentTime),
        //     duration: secTomin(player.duration)
        // })
    },
    //点击下一首播放下一首歌曲的回调
    playNextHandler() {
        // 下一首歌曲的信息是存储 recommend 页面，这个时候就需要使用页面通信 
        // 从 recommend 到 play 也需要实现通信，在recommend 中跳转到 play 的时候通过 querystring 携带当前歌曲的下一首歌曲的 id
        // 现在是从 play 获取 recommend，我们不能跳转到 recommend 页面去获取
        // const myEvent = getApp().globalData.myEvent
        // // console.log("发送了一个next");
        // // 为了能够让 recommend 页面找到下一个歌曲的 id，我们还需要把当前歌曲的id作为参数传递过去
        // myEvent.emit('next', this.data.songId)

        //使用pubsub实现页面通信
        const pubsub = getApp().globalData.pubsub

        pubsub.publish('next', this.data.songId)
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        console.log("页面卸载");
        // //在播放了某一首歌曲后点击左上角返回时需要卸载掉上一个播放页面，这样就不会给player对象传入N个函数
        // player.offPlay(this.onPlay)
        // //点击返回时移除上一个监听音频暂停的事件
        // player.offPause(this.onPause)
        // // 点击返回时移除上一个监听音频播放进度更新事件
        // player.offTimeUpdate(this.onTimeUpdate)
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})